$(function () {
    // 需求八： 计算总件数和总金额（勾选后）
    // 0. 声明计数器
    // 1. 设计函数被其他 增删改查的 地方最后进行调用
    // 2. 查找所有已经选中的input:checked，循环
    // 3. 向上找到td, 下一步 + 下一步 找到【单价元素】.text()获取<价格>
    // 4. 【单价元素】 下一步 ，向下查找Input 找到<数量>
    // 5.  价格 * 数量 = 行金额 
    // 6. 累加总金额 += 行金额， 累加总件数 += 数量
    // 7. 循环结束后，将总价格，总件数的内容修改
    function calcTotal () {
        // 0. 声明计数器
        let sum = 0; // 金额合计
        let count = 0; // 件数合计
        // 2. 查找所有已经选中的input:checked，循环
        let $selected = $('.data-row td:first-child > input:checked');
      //   console.log($selected);
        $selected.each(function(index,jsInput) {
             // 3. 向上找到td, 下一步 + 下一步 找到【单价元素】.text()获取<价格>
             let $priceElement = $(jsInput).parent().next().next();
             let price = $priceElement.text();
  
             // 4. 【单价元素】 下一步 ，向下查找Input 找到<数量>
             let num = $priceElement.next().find('input').val();
              // 5.  价格 * 数量 = 行金额
             let rowPrice = (num * price);
              // 6. 累加总金额 += 行金额， 累加总件数 += 数量
             sum += (rowPrice - 0);
             count += (num - 0);
        });
            // 7. 循环结束后，将总价格，总件数的内容修改
            $('.last-row td:nth-child(3) > span').text(count);
            $('.last-row td:nth-child(4) > span').text(sum.toFixed(2));
      }
      // // 测试代码
      // window.test = calcTotal;




    // 1、需求： 点击全选，将子选项的值与其同步
    // 实现步骤：1. 获取全选元素
    // 2. 给全选checkbox 绑定点击事件
    // 3. 事件触发获取当前checkbox的值： prop('checked');
    // 4. 找到所有子选项，设置 prop('checked') 为第三步的结果

    // 实现步骤：1. 获取全选元素
    $('.toggleAll').click(function () {
        // 2. 给全选checkbox 绑定点击事件
        let isChecked = $(this).prop('checked');
        // console.log(isChecked);
        // 3. 事件触发获取当前checkbox的值： prop('checked');
        // 4. 找到所有子选项，设置 prop('checked') 为第三步的结果
        $('.data-row td:first-child > input').prop('checked', isChecked);
        calcTotal();

    })
    // 2、需求：子选项勾选后，检查是否勾选总数==总数据数量，如果满足，全选勾上
    // 实现步骤：1. 给子选项添加点击事件
    // 获取所有【勾选中状态】的checkbox的长度
    // 获取所有【数据】的checkbox的长度
    // 对比结果 ： 将结果赋值给全选状态的checkbox

    // 实现步骤：1. 给子选项添加点击事件
    $('.data-row td:first-child input').click(function () {
        // 获取所有【勾选中状态】的checkbox的长度
        let checkCount = $('.data-row td:first-child input:checked').length;
        // 获取所有【数据】的checkbox的长度
        let dataCount = $('.data-row').length;
        // 对比结果 ： 将结果赋值给全选状态的checkbox
        // console.log(checkCount,dataCount,checkCount == dataCount);
        $('.toggleAll').prop('checked', checkCount == dataCount);
        calcTotal();
    })
    // 需求5:设计计算行小计的函数
    // 1：包装该对象为JQ对象
    // 2：获取单价 和 数量
    // 3: 单价：tr 向下找td:nth-child(3)
    // 4: 数量: tr 向下找td:nth-child(4) 向下找input
    // 5: 计算根据: 单价 * 数量 tr获取元素的值
    // 6: 向下找td:nth-child(5) 修改其 text()
    // 结果：改变DOM元素  tr => xx
    function calcRow(tr) {
        // 1：包装该对象为JQ对象
        let $tr = $(tr);
        // 3: 单价：tr 向下找td:nth-child(3)
        let price = $tr.find('td:nth-child(3)').text();
        //  4: 数量: tr 向下找td:nth-child(4) 向下找input
        let num = $tr.find('td:nth-child(4)>input').val();
        //  5: 计算根据: 单价 * 数量 tr获取元素的值
        let rowTotal = (price - 0) * (num - 0);
        // 6: 向下找td:nth-child(5) 修改其 text()
        $tr.find('td:nth-child(5)').text(rowTotal.toFixed(2));
    }

    




    // 需求3： 实现加加减减
    // 实现步骤: 1. 点击事件
    // 2. 根据【当前的点击对象】 获取input ，向前找兄弟
    // 3. 获取兄弟的value属性，并且+1
    // 4. 将新值设置给【第3行】的value

    // 实现步骤: 1. 点击事件
    $('.add').click(function () {
        // 2. 根据【当前的点击对象】 获取input ，向前找兄弟
        let $numInput = $(this).prev();
        // 3. 获取兄弟的value属性，并且+1
        // let newVal = Number($numInput.val()) + 1;
        // 创建对象的方式不常用
        // let newVal = parseInt($numInput.val()) + 1;
        let newVal = $numInput.val() - 0 + 1;
        // 4. 将新值设置给【第3行】的value
        $numInput.val(newVal);
        // 调用行小计的函数
        let $tr = $(this).parent().parent();
        calcRow($tr);
        calcTotal();
    });
    // 实现步骤: 1. 点击事件
    $('.substract').click(function () {

        // 2. 根据【当前的点击对象】 获取input ，向前找兄弟
        let $numInput = $(this).next();

        if ($numInput.val() <= 1) {
            return; // 直接结束函数
        }
        // 3. 获取兄弟的value属性，并且+1
        // let newVal = Number($numInput.val()) + 1;
        // 创建对象的方式不常用
        // let newVal = parseInt($numInput.val()) + 1;
        let newVal = $numInput.val() - 1;
        // 4. 将新值设置给【第3行】的value
        $numInput.val(newVal);
        // 调用行小计的函数
        let $tr = $(this).parent().parent();
        calcRow($tr);
        calcTotal();
    });
    // 需求6：点击删除当前行
    // 实现步骤： 1. 给删除按钮绑定点击事件
    // 【当前行this】2. 通过$(this)向上找2次找到父亲 tr
    // 3: 删除自身
    $('.data-row td:last-child button').click(function () {
         // 【当前行this】2. 通过$(this)向上找2次找到父亲 tr
         let $tr = $(this).parent().parent();
        // 3: 删除自身
        $tr.remove(); 
        calcTotal();
    });
    // 需求7：点击后删除已经选中的商品
    // 实现步骤： 1. 给.delSelected绑定点击事件
    // 2. 找到已经勾选的tr行
    // 3. 遍历找到的选中的input  向上找到tr 
    // 4. 删除这些tr
    // 实现步骤： 1. 给.delSelected绑定点击事件
    $('.delSelected').click(function() {
        // 2. 找到已经勾选的tr行
        // let selectedRow = $('.data-row td:first-child > input:checked');
        // selectedRow.each(function(index,input) {
             // 3. 遍历找到的选中的input  向上找到tr 
            // 4. 删除这些tr
        //     $(input).parent().parent().remove();
        // });
       // 简化版
       $('.data-row td:first-child > input:checked').closest('tr').remove();
       calcTotal();
    });

  
});